<template>
    <div class="content-page">
        <div class="content-nav">
            <el-breadcrumb class="breadcrumb" separator="/">
                <el-breadcrumb-item :to="{ path: '/dashboard' }">后台主页</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="content-main">
            <div class="form-table-box">
                <el-table :data="tableData" style="width: 100%" border stripe>
                    <el-table-column align="center" prop="phone" label="手机号" width="120">
                    </el-table-column>
                    <el-table-column align="center" prop="detail" label="用户信息">
                    </el-table-column>
                    <el-table-column align="center" prop="type" label="服务内容">
                        <template slot-scope="scope">
                            <span v-if="scope.row.type === 1">年度免疫</span>
                            <span v-if="scope.row.type === 2">首免第一针</span>
                            <span v-if="scope.row.type === 3">首免第二针</span>
                            <span v-if="scope.row.type === 4">首免第三针</span>
                            <span v-if="scope.row.type === 5">首免第四针</span>
                            <span v-if="scope.row.type === 0">未免疫</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="date" label="最后到店时间" :formatter="dateFormat" width="120">
                    </el-table-column>
                    <el-table-column align="center" prop="next_date" label="下次到店时间" :formatter="dateFormat" width="120">
                    </el-table-column>
                    <el-table-column align="center" fixed="right" label="操作" width="120">
                        <template slot-scope="scope">
                            <el-button size="small" type="danger" @click="handleRowSuccess(scope.row)">{{scope.row.is_notify ? '取消提醒': '再次提醒'}}</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="page-box">
                <el-pagination @current-change="handlePageChange" :current-page="page" :page-size="5" layout="total, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
            <div class="form-table-box">
                <el-table :data="tableData1" style="width: 100%" border stripe :show-header="false">
                    <el-table-column align="center" prop="phone" label="手机号" width="120">
                    </el-table-column>
                    <el-table-column align="center" prop="detail" label="用户信息">
                    </el-table-column>
                    <el-table-column align="center" prop="type" label="服务内容">
                    </el-table-column>
                    <el-table-column align="center" prop="date" label="最后到店时间" :formatter="dateFormat" width="120">
                    </el-table-column>
                    <el-table-column align="center" prop="next_date" label="下次到店时间" :formatter="dateFormat" width="120">
                    </el-table-column>
                    <el-table-column align="center" fixed="right" label="操作" width="120">
                        <template slot-scope="scope">
                            <el-button size="small" type="danger" @click="handleRowSuccess(scope.row)">{{scope.row.is_notify ? '取消提醒': '再次提醒'}}</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="page-box">
                <el-pagination @current-change="handlePageChange" :current-page="page1" :page-size="5" layout="total, prev, pager, next, jumper" :total="total1">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      page: 1,
      total: 0,
      tableData: [],
      page1: 1,
      total1: 0,
      tableData1: []
    }
  },
  methods: {
    handlePageChange (val) {
      this.page = val
      // 保存到localStorage
      localStorage.setItem('userPage', this.page)
      localStorage.setItem('userFilterForm', JSON.stringify(this.filterForm))
      this.getList()
    },
    handleRowSuccess (row) {
      console.log(row)
      this.$db.immune.update({id: row.id}, {is_notify: !row.is_notify}, (err, count) => {
        if (err) console.error('kumeng: ' + err.stack)
        if (count) {
          this.$message({
            type: 'success',
            message: '修改成功'
          })
        }
      })
    },
    dateFormat (row, column, cellValue, index) {
      let t = new Date(cellValue)
      let year = t.getFullYear()
      let month = t.getMonth() + 1
      let day = t.getDate()
      let newTime = year + '-' +
        (month < 10 ? '0' + month : month) + '-' +
        (day < 10 ? '0' + day : day)
      return newTime
    },
    getList () {
      this.$db.immune.find({is_notify: true}).exec((err, docs) => {
        if (err) console.error('kumeng: ' + err.stack)
        this.total = docs.length
      })
      this.$db.immune.find({is_notify: true}).sort({next_date: 1}).skip(5 * this.page - 5).limit(5).exec((err, docs) => {
        if (err) console.error('kumeng: ' + err.stack)
        this.tableData = docs
      })
      this.$db.records.find({is_notify: true}).exec((err, docs) => {
        if (err) console.error('kumeng: ' + err.stack)
        this.total1 = docs.length
      })
      this.$db.records.find({is_notify: true}).sort({next_date: 1}).skip(5 * this.page - 5).limit(5).exec((err, docs) => {
        if (err) console.error('kumeng: ' + err.stack)
        this.tableData1 = docs
      })
    }
  },
  mounted () {
    this.getList()
  },
  name: 'WelcomePage',
  components: {

  }
}
</script>

<style scoped>

</style>
